<template>
		<view class="page-section page-section-gap map-container">
					<map style="width: 100%; height: 90vh;" :layer-style='5'  :style="{height:mapheight}" :show-location='true'  :latitude="latitude" :longitude="longitude" :markers="marker" :scale="15":polyline="polyline"  @markertap="markertap"   @callouttap='callouttap'>
						<cover-view class="cover-view" :style='{bottom:coverbottom}' @click="onControltap">
							<cover-image class="cover-image" @click="play" src="/static/定位(1).png"></cover-image>
							<cover-view>
									定位
							</cover-view>
					</cover-view>	
					<view class="search-bar">
						<view class="search-bar-form">
							<!-- 第一个显示的输入框 -->
							<view class="search-bar-label" v-show="!inputShowed" @tap="showInput">
								<icon class="icon-search" type="search" :size="16"></icon>
								<view class="search-bar-text">请输入您的目的地</view>
							</view>
							<!-- 点击后出现的第二个输入框 -->
							<view class="search-bar-box">
								<icon class="icon-search-in-box" type="search" :size="16"></icon>
								<input confirm-type="search" class="search-bar-input" placeholder="请输入您的目的地" :value="inputVal" :focus="inputShowed"
								 @confirm="bindInput" @input="inputTyping" />
								 <!-- 取消的叉叉 -->
								<view class="icon-clear" v-if="inputVal" @tap="clearInput">
									<icon type="clear" size="14"></icon>
								</view>
							</view>
						</view>
						<view class="cancel-btn" @tap="hideInput" v-show="inputShowed">取消</view>
					</view>
					<view class="search-bar1">
						<view class="search-bar-form1">
							<!-- 第一个显示的输入框 -->
							<view class="search-bar-label1" v-show="!inputShowed" @tap="showInput">
								<icon class="icon-search1" type="search" :size="16"></icon>
								<view class="search-bar-text1">请输入您的起始点</view>
							</view>
							<!-- 点击后出现的第二个输入框 -->
							<view class="search-bar-box1">
								<icon class="icon-search-in-box1" type="search" :size="16"></icon>
								<input confirm-type="search" class="search-bar-input1" placeholder="请输入您的起始点" :value="inputVal" :focus="inputShowed"
								 @confirm="bindInput" @input="inputTyping" />
								 <!-- 取消的叉叉 -->
								<view class="icon-clear1" v-if="inputVal" @tap="clearInput">
									<icon type="clear" size="14"></icon>
								</view>
							</view>
						</view>
						<view class="cancel-btn1" @tap="hideInput" v-show="inputShowed">取消</view>
					</view>
			</map>
		</view>
</template>

<script>
    export default {
        data() {
            return {
                        latitude:30.53786, //纬度
                        longitude:114.365248,//经度
                        scale:13,//缩放级别
                        bottomData:false,
						
						polyline:[
											{
											points:[
												{
												latitude: 30.53334,//纬度
												longitude: 114.358238,//经度
												},
												{
												latitude: 30.539602,//纬度
												longitude: 114.364055,//经度
												},
												{
												latitude:  30.534687,//纬度
												longitude: 114.368684,//经度
												},
												{
												latitude: 30.538735,//纬度
												longitude: 114.366465,//经度
												}
											],
											color: "#33c9FFDD",
											width: 3,
											dottedLine: false
										},
										],//地图中的线
						
						
                        marker: [
                                            {
                                            id:0,
                                            latitude: 30.53334,//纬度
                                            longitude: 114.358238,//经度
                                            iconPath: '',    //显示的图标        
                                            rotate:0,   // 旋转度数
                                            width:20,   //宽
                                            height:30,   //高
                                                //   title:'我在这里',//标注点名
                                            alpha:0.5,   //透明度
                                            callout:{//自定义标记点上方的气泡窗口 点击有效  
                                            content:'国立武汉大学牌楼',//文本
                                            color:'#ffffff',//文字颜色
                                            fontSize:14,//文本大小
                                            borderRadius:15,//边框圆角
                                            borderWidth:'10',
                                            bgColor:'#e51860',//背景颜色
                                            display:'ALWAYS',//常显
                                            },
                                            },
                                            {
                                                    id:1234597,
                                                    latitude: 30.539602,//纬度
                                                    longitude: 114.364055,//经度
                                                    iconPath: '',    //显示的图标        
                                                    rotate:0,   // 旋转度数
                                                    width:20,   //宽
                                                height:30,   //高
                                            //  title:'我在这里',//标注点名
                                                    alpha:0.5,   //透明度
                                                //      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
                                                //   color:'red',//文本颜色
                                                //      },
                                                    callout:{//自定义标记点上方的气泡窗口 点击有效  
                                                content:'樱花城堡',//文本
                                                color:'#ffffff',//文字颜色
                                                fontSize:14,//文本大小
                                                borderRadius:15,//边框圆角
                                                borderWidth:'10',
                                                bgColor:'#e51860',//背景颜色
                                                display:'ALWAYS',//常显
                                                },
                                            },
                                            {
                                                    id:2,
                                                    latitude:  30.534687,//纬度
                                                    longitude: 114.368684,//经度
                                                    iconPath: '',    //显示的图标        
                                                    rotate:0,   // 旋转度数
                                                  width:20,   //宽
                                                    height:30,   //高
                                                    alpha:0.5,   //透明度
                                            callout:{//自定义标记点上方的气泡窗口 点击有效  
                                                content:'珞珈山',//文本
                                                color:'#ffffff',//文字颜色
                                                fontSize:14,//文本大小
                                                borderRadius:15,//边框圆角
                                                borderWidth:'10',
                                                bgColor:'#e51860',//背景颜色
                                                display:'ALWAYS',//常显
                                                },
                                            },
                                                {
                                                    id:3,
                                                    latitude: 30.536759,//纬度
                                                    longitude:114.363073,//经度
                                                    iconPath: '',    //显示的图标        
                                                    rotate:0,   // 旋转度数
                                                        width:20,   //宽
                                                        height:30,   //高
                                                        alpha:0.5,   //透明度
                                                    callout:{//自定义标记点上方的气泡窗口 点击有效  
                                                    content:'万林艺术博物馆',//文本
                                                    color:'#ffffff',//文字颜色
                                                    fontSize:14,//文本大小
                                                    borderRadius:15,//边框圆角
                                                    borderWidth:'10',
                                                    bgColor:'#e51860',//背景颜色
                                                    display:'ALWAYS',//常显
                                                    },
                                                },
                                            {
                                                    id:4,
                                                    latitude: 30.538735,//纬度
                                                    longitude: 114.366465,//经度
                                                    iconPath: '',    //显示的图标        
                                                    rotate:0,   // 旋转度数
                                                  width:20,   //宽
                                                    height:30,   //高
                                                    alpha:0.5,   //透明度
                                                callout:{//自定义标记点上方的气泡窗口 点击有效  
                                                    content:'九一二操场',//文本
                                                    color:'#ffffff',//文字颜色
                                                    fontSize:16,//文本大小
                                                    borderRadius:15,//边框圆角
                                                    borderWidth:'12',
                                                    bgColor:'#e51860',//背景颜色
                                                    display:'ALWAYS',//常显
                                                },
                                                },
                                            { 
                                                        id:5,
                                                        latitude:  30.541939,//纬度
                                                        longitude: 114.368098,//经度
                                                        iconPath: '',    //显示的图标        
                                                        rotate:0,   // 旋转度数
                                                width:20,   //宽
                                                    height:30,   //高
                                                    alpha:0.5,   //透明度
                                            callout:{//自定义标记点上方的气泡窗口 点击有效  
                                                    content:'蝶楼',//文本
                                                    color:'#ffffff',//文字颜色
                                                    fontSize:14,//文本大小
                                                    borderRadius:15,//边框圆角
                                                    borderWidth:'8',
                                                    bgColor:'#e51860',//背景颜色
                                                    display:'ALWAYS',//常显
                                                },
												},
												{
												            id:6,
												            latitude:  30.539948,//纬度
												            longitude: 114.371824,//经度
												            iconPath: '',    //显示的图标        
												            rotate:0,   // 旋转度数
												    width:20,   //宽
												        height:30,   //高
												        alpha:0.5,   //透明度
												callout:{//自定义标记点上方的气泡窗口 点击有效  
												        content:'月湖',//文本
												        color:'#ffffff',//文字颜色
												        fontSize:14,//文本大小
												        borderRadius:15,//边框圆角
												        borderWidth:'8',
												        bgColor:'#e51860',//背景颜色
												        display:'ALWAYS',//常显
												    },
                                                },
												{
												            id:7,
												            latitude: 30.543379,//纬度
												            longitude:114.371295,//经度
												            iconPath: '',    //显示的图标        
												            rotate:0,   // 旋转度数
												    width:20,   //宽
												        height:30,   //高
												        alpha:0.5,   //透明度
												callout:{//自定义标记点上方的气泡窗口 点击有效  
												        content:'凌波门',//文本
												        color:'#ffffff',//文字颜色
												        fontSize:14,//文本大小
												        borderRadius:15,//边框圆角
												        borderWidth:'8',
												        bgColor:'#e51860',//背景颜色
												        display:'ALWAYS',//常显
												    },
												},
												{
												            id:8,
												            latitude: 30.534796,//纬度
												            longitude:114.36075,//经度
												            iconPath: '',    //显示的图标        
												            rotate:0,   // 旋转度数
												    width:20,   //宽
												        height:30,   //高
												        alpha:0.5,   //透明度
												callout:{//自定义标记点上方的气泡窗口 点击有效  
												        content:'珞珈广场',//文本
												        color:'#ffffff',//文字颜色
												        fontSize:14,//文本大小
												        borderRadius:15,//边框圆角
												        borderWidth:'8',
												        bgColor:'#e51860',//背景颜色
												        display:'ALWAYS',//常显
												    },
												},
												{
												            id:9,
												            latitude: 30.53727,//纬度
												            longitude:114.36434,//经度
												            iconPath: '',    //显示的图标        
												            rotate:0,   // 旋转度数
												    width:20,   //宽
												        height:30,   //高
												        alpha:0.5,   //透明度
												callout:{//自定义标记点上方的气泡窗口 点击有效  
												        content:'李达塑像',//文本
												        color:'#ffffff',//文字颜色
												        fontSize:14,//文本大小
												        borderRadius:15,//边框圆角
												        borderWidth:'8',
												        bgColor:'#e51860',//背景颜色
												        display:'ALWAYS',//常显
												    },
												},
												
                                        ],
            }
			
            },
        onLoad() {

        },
			onShow() {
						uni.getLocation({
										geocode:true,
										type: 'wgs84',
										success: (res) => {
											console.log(res,'获取当前位置')
											this.longitude =res.longitude
											this.latitude = res.latitude
											
										},
										address:(res) =>{
											console.log('address',res)
										}
						});
				},
        computed:{
                    mapheight(){
                        let data =''
                        if(this.bottomData){
                            if(this.upTop){
                                data ='50px'
                            }else{
                                data ='200px'
                            }
                        }else{
                            data ='90vh'
                        }
                        return data
                    },
                    coverbottom(){
                        let data =''
                        if(this.bottomData){
                            data ='20rpx'
                        }else{
                            data ='100rpx'
                        }
                        return data
                    }
                },
        methods:{
			 handleMarkerTap(e) {  
			      // 这里你可以添加逻辑来判断点击的是哪个标记点  
			      // 为了简化，我们直接显示Polyline  
			      this.showPolyline = true;  
			      this.drawPolyline();  
			    },  
			    drawPolyline() {  
			      if (this.showPolyline && this.polylinePoints.length > 0) {  
			        this.mapCtx.addPolyline({  
			          points: this.polylinePoints.map(p => ({  
			            longitude: p.longitude,  
			            latitude: p.latitude,  
			          })),  
			          color: '#FF0000DD',  
			          width: 2,  
			          dottedLine: false,  
			        });  
			      }  
			    },  
			    // 其他方法...  
			  },  
			  mounted() {  
			      this.mapCtx = uni.createMapContext('map', this);  
			    },  
			
			
                //地图点击事件
            markertap(e) {
                console.log("===你点击了标记点===",e)
                },
            //地图点击事件
            callouttap(e){
                console.log('地图点击事件',e)
        },
        
		
			// 去掉前导空格和后导空格。
			trim: function(value) {
				return value ? value.toString().replace(/(^\s*)|(\s*$)/g, "") : value;
			},
			// 显示第二个输入框
			showInput() {				
				this.inputShowed = true
			},
			// 隐藏第二个输入框
			hideInput() {
				this.inputVal = "";
				this.inputShowed = false;
				uni.hideKeyboard(); //强行隐藏键盘
			},
			// 取消的叉叉的事件
			clearInput() {
				this.inputVal = ""
			},
			// 输入一个字符串就会进入这里
			inputTyping: function(e) {				
				this.inputVal = e.detail.value
			},
       };
	

</script>

<style>
		.map-container {  
		    position: relative;  
		    overflow: hidden;  
		}  
		  
		.map-container .cover-view {  
		    display: flex;  
		    flex-direction: column;  
		    align-items: center;  
		    justify-content: center;  
		    width: 80rpx;  
		    height: 80rpx;  
		    color: #484848;  
		    background-color: #fff;  
		    background-size: 120rpx 120rpx;  
		    background-position: center center;  
		    position: absolute;  
		    bottom: 100rpx;  
		    right: 32rpx;  
		}  
		  
		.map-container .cover-image {  
		    display: inline-block;  
		    width: 30rpx;  
		    height: 30rpx;  
		}
		.search-bar {
			position: relative;
			padding: 8px 10px;
			display: -webkit-flex;
			display: flex;
			box-sizing: border-box;
			align-items: center;
			background-color: #fff;
			mask-repeat: no-repeat;
		}
		.search-bar-form {
			position: relative;
			-webkit-box-flex: 1;
			-webkit-flex: auto;
			flex: auto;
			border-radius: 5px;
			background-color: #f0f0f0;
		}
		
		.search-bar-text {
			display: inline-block;
			font-size: 14px;
			vertical-align: middle;
		}
		
		.search-bar-box {
			width: 100%;
			height: 30px;
			padding-left: 10px;
			padding-right: 30px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			position: relative;
			z-index: 1;
		
		}
		
		.search-bar-input {
			font-size: 14px;
			flex: 1;
		}
		
		.icon-clear {
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			padding: 0 8px;
			font-size: 0;
			display: flex;
			align-items: center;
		}
		
		.search-bar-label {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
			border-radius: 3px;
			text-align: center;
			color: #9b9b9b;
			background: #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: center;
		
		}
		
		.cancel-btn {
			margin-left: 10px;
			line-height: 30px;
			color: #5982fd;
			white-space: nowrap;
			font-size: 15px;
		}
		.search-bar1 {
			position: relative;
			padding: 8px 10px;
			display: -webkit-flex;
			display: flex;
			box-sizing: border-box;
			align-items: center;
			background-color: #fff;
			mask-repeat: no-repeat;
			
		}
		.search-bar-form1 {
			position: relative;
			-webkit-box-flex: 1;
			-webkit-flex: auto;
			flex: auto;
			border-radius: 5px;
			background-color: #f0f0f0;
		}
		
		.search-bar-text1 {
			display: inline-block;
			font-size: 14px;
			vertical-align: middle;
		}
		
		.search-bar-box1 {
			width: 100%;
			height: 30px;
			padding-left: 10px;
			padding-right: 30px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			position: relative;
			z-index: 1;
		
		}
		
		.search-bar-input1{
			font-size: 14px;
			flex: 1;
		}
		
		.icon-clear1 {
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			padding: 0 8px;
			font-size: 0;
			display: flex;
			align-items: center;
		}
		
		.search-bar-label1 {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
			border-radius: 3px;
			text-align: center;
			color: #9b9b9b;
			background: #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: center;
		
		}
		
		.cancel-btn1 {
			margin-left: 10px;
			line-height: 30px;
			color: #5982fd;
			white-space: nowrap;
			font-size: 15px;
		}
</style>
